<style scoped>
.search_title{
    font-size: 40px;
    margin-left: 5%;
    margin-right: 5%;
    text-align: start;
    border-bottom: 2px rgb(11, 235, 243) dotted;
}
.search_box{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
}
</style>

<template>
    <div>
        <v-nav-top/>
        <div class="search_title"> Search Result </div>
        <div class="search_box">
            <v-search-item v-for="(item, index) in search_data" :item="item" :keywords="$route.query.key" :key="index"/>
        </div>
    </div>
</template>

<script>
import nav from '@/components/nav.vue'
import searchItem from '@/components/index/searchItem.vue'
export default {
    name: 'search',
    components:{
        'v-nav-top':nav,
        'v-search-item': searchItem
    },
    data () {
        return {
            search_data:[]
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            let attr = this.$route.query.key;
            this.$Axios({
                method: 'get',
                url: '/catalog/search',
                params: {
                    'attr': attr
                }
            }).then(res=>{
                console.log(res.data);
                this.search_data = res.data.data;
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        }
    }
}
</script>